<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他选择器</title>
    <!--

    属性选择器:
        元素[属性名='值']{

        }
        元素[属性名^='值'] 某个属性的值是以某个内容开头的
        元素[属性 $='值'] 某个属性的值以什么结尾的

        元素[属性 *='值'] 只要这个标签的属性中包含某个值就变色
        如果能匹配到多个设置,后面的会覆盖前面
    -->
    <style type="text/css">

        input[type='text'] {
            color: red;
        }

        input[type='password'] {
            color: aqua;
        }

        input[name *='y'] {
            color: tomato;
        }

        input[name ^='s'] {
            color: sienna;
        }

        input[name $='y'] {
            color: darkcyan;
        }

        /*
        伪类选择器: 同一个元素在不同的操作的情况下产生不同的效果
        link 是 a 标签连接的默认颜色,也就是还没有点击过的
        visited 点击过的
        hover鼠标移动到上面
        active 鼠标按下去的时候的颜色
         */
        a:link {
            color: red;
        }

        a:visited {
            color: aqua;
        }

        a:hover {
            color: gold;
        }

        a:active {
            color: wheat;
        }
/*
层级选择器
后代选择:父选择后所有的这个后代元素都使用这个设置,不分层级,父子可以匹配到,爷孙也匹配到
父选择 子选择{}
父选择>子选择{} 只能匹配到父子这一层关系
 */
        #waimian p {
            color: red;
        }
        #waimian>span{
            color: blue;
        }



        input[id='nengbuneng']{
            color: red;
        }
    </style>
</head>
<body>


<div id="waimian">
    <p>这是个 p</p>
    <span>这不是p,是一个 span</span>
    <div>
        <p>这是嵌套中的 p</p>
        <span>这是嵌套中的 span</span>
    </div>
</div>

<a href="01基本语法.html">点击呼叫 wyf 来吃小龙虾</a>
<a href="02css%20引入方式.html">点击呼叫 wyf 来吃小龙虾</a>

<form>
    <input type="text" name="username"><br>
    <input type="password" name="password"><br>
    <input name="suibianxiegemingzi"><br>
    <input name="suishu"><br>
    <input name="aya"><br>
    <input name="dya"><br>
    <input name="aay"><br>
    <input name="hobby"><br>
    <input id="nengbuneng">
</form>


</body>
</html>